<template>
	<view class="set-body">
		<input class="uni-input common-input" v-model="email" type="text" placeholder="输入需要绑定的邮箱" />
		<input class="uni-input common-input" v-model="password" type="text" password placeholder="输入密码" />
		<button type="primary" :loading="loading" class="user-set-btn" :class="{'user-set-btn-disable':disable}" 
		@tap="submit" :disabled="disable">完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				email:"",
				password:"",
				disable:true,
				loading:false
			}
		},
		watch:{
			email(val){
				this.change()
			},
			password(val){
				this.change()
			}
		},
		methods: {
			// 提交
			submit(){
				this.loading=true;
				this.disable=true;
				if (!this.check()) {
					this.loading=false;
					this.disable=false;
					return;
				}
				// 提交服务器
				uni.showToast({
					title: '提交服务器',
					mask:false,
					duration:1500
				});
				this.loading=false;
				this.disable=false;
			},
			// 监听输入框
			change(){
				if (this.email && this.password) {
					this.disable=false;
					return;
				}
				this.disable=true;
			},
			// 验证层
			check(){
				if(!this.email || this.email==""){
					uni.showToast({
						title:"邮箱不能为空！",
						icon:"none"
					})
					return false;
				}
				// 验证邮箱格式
				let ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				//输出 true
				if(!ePattern.test(this.email)){
					uni.showToast({
						title:"请输入正确邮箱格式！",
						icon:"none"
					})
					return false;
				}
				
				if(!this.password || this.password==""){
					uni.showToast({
						title:"密码不能为空！",
						icon:"none"
					})
					return false;
				}
				return true;
			}
			

		}
	}
</script>

<style>

</style>
